<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 3 Counter</title>
    <!-- 引入 Vue 3 的 CDN 链接 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
    <!-- 定义一个带有 id 为 app 的 DOM 元素，作为 Vue 应用的挂载点 -->
    <div id="app">
        <!-- 显示当前计数器的值 -->
        <p>Count: {{ count }}</p>
        <!-- 点击按钮时调用 increment 方法增加计数器的值 -->
        <button @click="increment">+</button>
        <!-- 点击按钮时调用 decrement 方法减少计数器的值 -->
        <button @click="decrement">-</button>
    </div>

    <script>
        // 使用 Vue 3 的 createApp 函数创建一个新的 Vue 应用实例
        const app = Vue.createApp({
            // 使用 setup 函数来定义响应式数据和方法
            setup() {
                // 引入 Vue 3 的 ref 函数来创建一个响应式数据
                const { ref } = Vue;
                // 创建一个名为 count 的响应式数据，初始值为 0
                const count = ref(0);

                // 定义一个增加计数器值的方法
                const increment = () => {
                    count.value++;
                };

                // 定义一个减少计数器值的方法
                const decrement = () => {
                    count.value--;
                };

                // 返回需要在模板中使用的数据和方法
                return {
                    count,
                    increment,
                    decrement
                };
            }
        });

        // 将 Vue 应用实例挂载到 id 为 app 的 DOM 元素上
        app.mount('#app');
    </script>
</body>

</html>